<template>
  <div>
    <el-button @click="sampleM">父组件title</el-button>
    <span>统计一下Vue子组件共有{{ vueCount }}个元素</span>
    <inner-four ref="vueId" title="Vue" @post-insert="postInsert">
      <!--      <span slot="mem" slot-scope="props">内存</span>-->
      <span slot="mem">内存</span>
      <template #cpu="props">
        <span>CPU{{ vueCount }}{{ props.a }}{{ props.b }}</span>
      </template>
      <span>&&&&&</span>
      <span>&&&&&</span>
    </inner-four>
    <inner-four :title="sampleD"></inner-four>
    <inner-four></inner-four>
  </div>
</template>

<script>
import InnerFour from "@/components/InnerFour";
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import New from './components/New.vue';
export default {
  name: "TestFour",
  components: {
    InnerFour,
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "React",
      vueCount: 0,
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {
      //document .getElementBy
      this.$refs.vueId.insert();
    },
    // 子组件方法调用父组件方法的首选方案是 $emit事件
    // 父组件方法调用子组件方法的首选方案是 ref操控虚拟dom
    postInsert(s) {
      this.vueCount = s;
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
